<template>
  <div class="container">
    <n-page-header title="我的留言" @back="router.back" />

    <div class="message-panel">
      <n-tabs v-model:value="tabValue" type="line" justify-content="space-evenly" animated>
        <n-tab-pane name="mine" tab="我扔出的">
          <n-list>
            <n-list-item v-for="(item, index) in lists.mine" :key="item.id" @click="toMessageDetail(item.id)" :ref="setItemRef.mine">
              <n-thing class="message-item">
                <template #header>
                  <n-p depth="3" v-if="item.pick_user_id != null">瓶子已被捞到</n-p>
                  <n-p depth="3" v-if="item.type === 1">仅自己可见</n-p>
                  <n-p depth="3" v-if="item.type === 2">指定用户可见</n-p>
                </template>

                <template #header-extra v-if="item.pick_user_id != null">
                  <n-p depth="3" v-if="item.reply_status === 1">收到回复</n-p>
                </template>

                <template #description>
                  {{item.content}}
                </template>

                <template #footer>
                  <n-p depth="3">{{item.date}}</n-p>
                </template>
              </n-thing>
            </n-list-item>
          </n-list>
          <div class="list-status">
            <div class="list-loading" v-if="requesting.mine">
              <n-spin :size="18" />
            </div>
            <div class="list-no-more" v-if="noMore.mine">
              <n-p depth="3">没有更多了</n-p>
            </div>
          </div>
        </n-tab-pane>
        <n-tab-pane name="pick" tab="我捞到的">
          <n-list>
            <n-list-item v-for="(item, index) in lists.pick" :key="item.id" @click="toMessageDetail(item.id)" :ref="setItemRef.pick">
              <n-thing class="message-item">
                <template #header>
                  <n-p depth="3">来自一位瓶友的留言</n-p>
                </template>

                <template #header-extra>
                  <n-p depth="3" v-if="item.reply_status === 0">未回复</n-p>
                </template>

                <template #description>
                  {{item.content}}
                </template>

                <template #footer>
                  <n-p depth="3">{{item.date}}</n-p>
                </template>
              </n-thing>
            </n-list-item>
          </n-list>
          <div class="list-status">
            <div class="list-loading" v-if="requesting.pick">
              <n-spin :size="18" />
            </div>
            <div class="list-no-more" v-if="noMore.pick">
              <n-p depth="3">没有更多了</n-p>
            </div>
          </div>
        </n-tab-pane>
        <n-tab-pane name="receive" tab="我收到的" v-if="userStore.role === 1">
          <n-list>
            <n-list-item v-for="(item, index) in lists.receive" :key="item.id" @click="toMessageDetail(item.id)" :ref="setItemRef.receive">
              <n-thing class="message-item">
                <template #header>
                  <n-p depth="3">来自一位瓶友的咨询</n-p>
                </template>

                <template #header-extra>
                  <n-p depth="3" v-if="item.reply_status === 0">未回复</n-p>
                </template>

                <template #description>
                  {{item.content}}
                </template>

                <template #footer>
                  <n-p depth="3">{{item.date}}</n-p>
                </template>
              </n-thing>
            </n-list-item>
          </n-list>

          <div class="list-status">
            <div class="list-loading" v-if="requesting.receive">
              <n-spin :size="18" />
            </div>
            <div class="list-no-more" v-if="noMore.receive">
              <n-p depth="3">没有更多了</n-p>
            </div>
          </div>
        </n-tab-pane>
      </n-tabs>
    </div>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import {useUserStore} from "@/stores/user.js";
import {ref, watch, nextTick} from "vue";
import {useRequests} from "@/common/requests.js";
import {useMessage, useNotification} from "naive-ui";

const router = useRouter()
const userStore = useUserStore()

const requests = useRequests()
const message = useMessage()
const notify = useNotification()
import { useIntersectionObserver } from '@vueuse/core'

const tabValue = ref("mine")
const page = ref({
  mine: {
    page: 0,
    offset: 20
  },
  pick: {
    page: 0,
    offset: 20,
  },
  receive: {
    page: 0,
    offset: 20
  }
})
const lists = ref({
  mine: [],
  pick: [],
  receive: []
})
const listItemRef = ref({
  mine: [],
  pick: [],
  receive: []
})
const setItemRef = {
  mine: el => {
    listItemRef.value.mine.push(el)
  },
  pick: el => {
    listItemRef.value.pick.push(el)
  },
  receive: el => {
    listItemRef.value.receive.push(el)
  },
}

const requesting = ref({
  mine: false,
  pick: false,
  receive: false
})
const noMore = ref({
  mine: false,
  pick: false,
  receive: false
})
const methods = {
  mine: "listByMine",
  pick: "listByPick",
  receive: "listByReceive"
}
const fetchList = (type, refresh) => {
  if (requesting.value[type]) {
    return false
  }
  requesting.value[type] = true

  if (refresh) {
    listItemRef.value[type] = []
    noMore.value[type] = false
    page.value[type].page = 0
  }

  page.value[type].page ++
  requests.message[methods[type]](page.value[type]).then(resp => {
    requesting.value[type] = false
    if (resp.ret === 0) {
      if (refresh) {
        lists.value[type] = resp.data
      } else {
        lists.value[type].push(...resp.data)
      }

      if (resp.data.length < page.value[type].offset) {
        noMore.value[type] = true
      } else {
        nextTick(() => {
          const item = listItemRef.value[type][listItemRef.value[type].length - 2]
          const { stop } = useIntersectionObserver(item, ([{ isIntersecting }]) => {
            if (isIntersecting) {
              stop()
              fetchList(type)
            }
          })
        })
      }
    } else {
      message.error(resp?.data ?? resp?.msg ?? "未知错误")
    }
  }).catch(err => {
    requesting.value[type] = false

    console.log(err)
    notify.error({content: "出错了", meta: err.toString(), duration: 1500})
  })
}

const toMessageDetail = id => {
  router.push({name: "MessageView", params: {id}})
}

fetchList(tabValue.value)

watch(tabValue, n => {
  fetchList(n, true)
})
</script>

<style lang="scss" scoped>
.container {
  .message-panel {
    margin-top: 1rem;

    .list-status {
      margin-top: .5rem;
      display: flex;
      justify-content: center;
      align-items: center;

      .list-no-more {
        text-align: center;
      }
    }
  }

  .message-item {
    cursor: pointer;
  }
}
</style>
